<template>
  <div id="app">
    <h2>考试</h2>
	<button @click="disAll">{{dis}}</button>
	<br>
	<span>所在城市：</span>
	<select v-model="city">
		<option v-for="(item,index) in cityList" :key="index" :value="item.name" :disabled="isTrue">{{item.name}}</option>
	</select>
	<br>
	<span>用户名：</span> 
	<input type="text" v-model="userName" :disabled="isTrue">
	<br>
	<span>年龄：</span>
	<input type="text" v-model="age" :disabled="isTrue">
	<br>
	<button :disabled="isTrue" @click="add">{{addBtn}}</button>
	<table border="1" style="border-collapse: collapse;" width="800">
		<thead>
			<tr>
				<th></th>
				<th>ID</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>地区</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr align="center" v-for="(item,index) in goodsInfo" :key="index">
				<td> 
					<input type="checkbox" :disabled="isTrue" :value="index" v-model="checkedArr">
				</td>
				<td>{{item.id}}</td>
				<td>{{item.userName}}</td>
				<td>{{item.age}}</td>
				<td>{{item.city}}</td>
				<td>
					<button :disabled="isTrue" @click="change(index)">修改</button>
					<button :disabled="isTrue" @click="del(index)">删除</button>
				</td>
			</tr>
		</tbody>
	</table>
	<button :disabled="isTrue" @click="delAll">删除所选</button>
  </div>
</template>

<script>
	import cityList from "./assets/data.json"
	
	export default {
		name:"App",
		data(){
			return {
				dis:"锁定",
				cityList:cityList.data,
				isTrue:false,
				userName:"",
				age:"",
				city:"",
				addBtn:"提交",
				goodsInfo:[],
				num:1,
				currentIndex:0,
				checkedArr:[],
				time:4
			}
		},
		methods:{
			// 添加方法
			add(){
				let obj = {
					id:this.num,
					userName:this.userName,
					age:this.age,
					city:this.city					
				}
				
				if(this.addBtn == "提交"){			
					this.num++;
					this.goodsInfo.push(obj)	
				}else{
					obj.id = this.goodsInfo[this.currentIndex].id
					this.goodsInfo.splice(this.currentIndex,1,obj)	
					this.addBtn = "提交"
				}
				this.userName = ""
				this.age = ""
				this.city = ""	
				
			},
			// 删除方法
			del(index){
				this.goodsInfo.splice(index,1)
			},
			// 修改操作
			change(index){
				let data = this.goodsInfo[index]
				console.log(data);
				this.userName = data.userName
				this.age = data.age
				this.city = data.city
				this.addBtn = "确认修改",
				this.currentIndex = index
			},
			// 删除所选
			delAll(){
				this.checkedArr.sort(function(a,b){
					return b - a 
				}).forEach(item => {
					this.goodsInfo.splice(item,1)
				})
				this.checkedArr = []
			},
			// 锁定与解锁
			disAll(){
				if(this.dis == "锁定"){
					let timer = setInterval(()=>{
						this.time--
						this.dis = this.time + "秒后解锁"	
						this.isTrue	 = true	
						if(this.time == 0){
							clearInterval(timer)
							this.dis = "解锁"
							this.time = 3
						}
					},1000)
				}else{
					this.isTrue	 = false
				}
				
			}
		}
	}
	
	
	
	
	// let user = {
	// 	name:"zhangsan",
	// 	age:18
	// }
	
	// console.log(user)
	
	// let user1 = user
	// let user2 = user
	// let user3 = user
	
	// user1.age = 20;
	
	// console.log(user1.age);
	// console.log(user2.age);
	// console.log(user3.age);
	
	// function usr () {
	// 	return {
	// 		name:"zhangsan",
	// 		age:18
	// 	}
	// }
	
	// let user4 = usr()
	// let user5 = usr()
	// let user6 = usr()
	// console.log(user4);
	// user4.age = 30;
	// console.log(user4.age);
	// console.log(user5.age);
	// console.log(user6.age);
	
	
	
	
	
</script>

<style >
	
</style>